<template>
  <div class="home-page">
    <!-- <NoticeBar :msg="latestNotice" type="warning"></NoticeBar> -->
    
    <!-- 导航栏 -->
    <header class="navbar">
      <div class="navbar-container">
        <!-- LOGO 部分 -->
        <div class="navbar-brand">
          <router-link to="/" class="logo">
            <!-- PC端显示的完整LOGO -->
            <div class="logo-full">
              <svg class="logo-svg" viewBox="0 0 32 32">
                <!-- 外部六边形 -->
                <path 
                  fill="#1a237e"
                  d="M16 2L28 9V23L16 30L4 23V9L16 2Z"
                />
                <!-- 内部六边形 - 创建深度感 -->
                <path 
                  fill="#2196f3"
                  d="M16 6L24 11V21L16 26L8 21V11L16 6Z"
                  opacity="0.8"
                />
                <!-- 中心菱形 - 突出核心 -->
                <path 
                  fill="#ffffff"
                  d="M16 10L20 13V19L16 22L12 19V13L16 10Z"
                  opacity="0.9"
                />
                <!-- 装饰线条 - 增加科技感 -->
                <path 
                  stroke="#4fc3f7"
                  strokeWidth="0.5"
                  fill="none"
                  d="M4 9L16 2L28 9M16 30L16 2"
                  opacity="0.3"
                />
              </svg>
              <span class="logo-text">ETNOR-API</span>
              <span class="logo-domain">etnor.xyz</span>
            </div>
            
            <!-- 移动端显示的简化LOGO -->
            <div class="logo-mobile">
              <span class="logo-text">ETNOR-API</span>
            </div>
          </router-link>
        </div>

        <!-- 汉堡菜单按钮 -->
        <button class="menu-toggle" @click.stop="toggleMenu">
          <i class="fas" :class="isMenuOpen ? 'fa-times' : 'fa-bars'"></i>
        </button>

        <!-- 遮罩层 -->
        <div 
          class="menu-overlay" 
          v-if="isMenuOpen" 
          @click.stop="closeMenu"
        ></div>

        <!-- 侧边菜单 -->
        <nav class="nav-menu" :class="{ 'menu-open': isMenuOpen }">
          <!-- 菜单内容 -->
          <ul class="navbar-links">
            <li>
              <router-link to="/problem" class="nav-link">
                <i class="fas fa-comments"></i>
                <span>{{ translations.feedback }}</span>
              </router-link>
            </li>
            <li>
              <router-link to="/about" class="nav-link">
                <i class="fas fa-info"></i>
                <span>{{ translations.about }}</span>
              </router-link>
            </li>
            <li>
              <router-link to="/tools" class="nav-link">
                <i class="fas fa-wrench"></i>
                <span>{{ translations.toolbox }}</span>
              </router-link>
            </li>
            <li>
              <router-link to="/watch" class="nav-link">
                <i class="fas fa-eye"></i>
                <span>{{ translations.monitorCenter }}</span>
              </router-link>
            </li>
            <li>
              <router-link to="/doc/blog" class="nav-link">
                <i class="fas fa-blog"></i>
                <span>{{ translations.blog }}</span>
              </router-link>
            </li>
            <li>
              <router-link to="/login" class="nav-link highlight">
                <i class="fas fa-user-circle"></i>
                <span>{{ translations.creatorEntry }}</span>
              </router-link>
            </li>
          </ul>
        </nav>
      </div>
    </header>

    <div 
      class="menu-overlay" 
      :class="{ 'active': isMenuOpen }"
      @click="toggleMenu"
    ></div>

    <!-- 移动端专属 Hero Section -->
    <section class="hero-section-mobile" v-if="isMobile">
      <!-- 背景层 -->
      <div class="hero-bg">
        <div class="bg-pattern"></div>
        <div class="bg-overlay"></div>
        <div class="tech-circles">
          <div class="tech-circle" v-for="i in 3" :key="i"></div>
        </div>
      </div>

      <!-- 内容层 -->
      <div class="hero-content">
        <!-- 品牌标识 -->
        <div class="brand-identifier">
          <div class="brand-logo">
            <i class="fas fa-code-branch"></i>
          </div>
          <div class="brand-name">E特尔诺</div>
        </div>

        <!-- 主标题区 -->
        <div class="hero-titles">
          <h1 class="main-title">
            <span class="title-line">高效接口管理</span>
            <span class="title-line highlight">助力业务腾飞</span>
          </h1>
          <p class="subtitle">一站式API开发与管理平台</p>
          
          <!-- 特性标签 -->
          <div class="feature-tags">
            <span class="tag">
              <i class="fas fa-bolt"></i>
              高并发
            </span>
            <span class="tag">
              <i class="fas fa-shield-alt"></i>
              安全可靠
            </span>
            <span class="tag">
              <i class="fas fa-code"></i>
              简化开发
            </span>
          </div>
        </div>

        <!-- 数据统计 -->
        <div class="stats-container">
          <div class="stat-item" v-for="(stat, index) in stats" :key="index">
            <div class="stat-icon">
              <i :class="stat.icon"></i>
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ stat.value }}</div>
              <div class="stat-label">{{ stat.label }}</div>
            </div>
          </div>
        </div>

        <!-- CTA按钮组 -->
        <div class="cta-group">
          <button class="cta-button primary">
            <span class="button-content">
              <i class="fas fa-rocket"></i>
              立即开始
            </span>
            <div class="button-glow"></div>
          </button>
          <button class="cta-button secondary">
            <i class="fas fa-play-circle"></i>
            查看演示
          </button>
        </div>
      </div>
    </section>

    <!-- 修改 hero-section 部分 -->
    <section class="hero-section" v-if="!isMobile">
      <!-- SVG背景 -->
      <div class="hero-background">
        <svg class="background-svg" viewBox="0 0 1440 800" preserveAspectRatio="xMidYMid slice">
          <defs>
            <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
              <stop offset="0%" style="stop-color:#0f172a;stop-opacity:1" />
              <stop offset="100%" style="stop-color:#1e3a8a;stop-opacity:1" />
            </linearGradient>
            <linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="0%">
              <stop offset="0%" style="stop-color:rgba(56,189,248,0.1);stop-opacity:1" />
              <stop offset="100%" style="stop-color:rgba(59,130,246,0.1);stop-opacity:1" />
            </linearGradient>
          </defs>
          
          <!-- 背景渐变 -->
          <rect width="100%" height="100%" fill="url(#grad1)" />
          
          <!-- 装饰图形 -->
          <circle cx="10%" cy="20%" r="50" fill="url(#grad2)" opacity="0.5" />
          <circle cx="90%" cy="60%" r="100" fill="url(#grad2)" opacity="0.3" />
          <circle cx="50%" cy="70%" r="75" fill="url(#grad2)" opacity="0.4" />
          
          <!-- 装饰线条 -->
          <path d="M0,100 Q720,150 1440,100" stroke="rgba(56,189,248,0.1)" stroke-width="2" fill="none" />
          <path d="M0,150 Q720,200 1440,150" stroke="rgba(59,130,246,0.1)" stroke-width="2" fill="none" />
          
          <!-- 网格装饰 -->
          <pattern id="grid" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
            <rect width="40" height="40" fill="none" stroke="rgba(255,255,255,0.03)" />
          </pattern>
          <rect width="100%" height="100%" fill="url(#grid)" />
        </svg>
      </div>

      <!-- 添加移动端装饰元素 -->
      <div class="mobile-decorations">
        <div class="mobile-decoration decoration-1"></div>
        <div class="mobile-decoration decoration-2"></div>
      </div>

      <div class="hero-content">
        <!-- 左侧内容 -->
        <div class="hero-left">
          <h1 class="hero-title">
            <span class="gradient-text">{{ translations.apiPlatform }}</span>
            <br />
            <div class="typing-container">
              <div class="typing-text" :class="{ 'shatter': isShatterActive }">
                {{ currentText }}
                <span class="cursor">|</span>
              </div>
              <div class="text-particles" v-if="isShatterActive">
                <span 
                  v-for="(particle, index) in textParticles" 
                  :key="index"
                  class="particle"
                  :style="particle.style"
                >{{ particle.char }}</span>
              </div>
            </div>
          </h1>
          <p class="hero-description">
            {{ translations.discover }}
          </p>
          <div class="hero-stats">
            <div class="stat-item">
              <i class="fas fa-code"></i>
              <span class="stat-number">{{ apiCount }}+</span>
              <span class="stat-label">{{ translations.availableAPIs }}</span>
            </div>
            <div class="stat-item">
              <i class="fas fa-users"></i>
              <span class="stat-number">{{ creatorCount }}+</span>
              <span class="stat-label">{{ translations.activeDevelopers }}</span>
            </div>
            <div class="stat-item">
              <i class="fas fa-star"></i>
              <span class="stat-number">98%</span>
              <span class="stat-label">{{ translations.uptime }}</span>
            </div>
          </div>
        </div>

        <!-- 右侧轮播图 -->
        <div class="hero-carousel">
          <div class="carousel-container">
            <div class="carousel" ref="carousel">
              <div 
                v-for="(slide, index) in carouselSlides" 
                :key="index"
                class="carousel-slide"
                :class="{ active: currentSlide === index }"
                :style="{ transform: `translateX(${100 * (index - currentSlide)}%)` }"
              >
                <div class="slide-image" :style="{ backgroundImage: `url(${slide.image})` }"></div>
                <div class="slide-overlay">
                  <div class="slide-content">
                    <h2 class="slide-title">{{ slide.title }}</h2>
                    <p class="slide-description">{{ slide.description }}</p>
                    <button class="slide-button" @click="slide.action">
                      {{ slide.buttonText }}
                      <i class="fas fa-arrow-right"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <button class="carousel-control prev" @click="prevSlide">
              <i class="fas fa-chevron-left"></i>
            </button>
            <button class="carousel-control next" @click="nextSlide">
              <i class="fas fa-chevron-right"></i>
            </button>

            <div class="carousel-indicators">
              <button
                v-for="(slide, index) in carouselSlides"
                :key="index"
                class="indicator"
                :class="{ active: currentSlide === index }"
                @click="goToSlide(index)"
              ></button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 新增公告展示区 -->
    <section class="announcements-section">
      <div class="announcements-container">
        <div class="section-header">
          <h2>
            <i class="fas fa-bullhorn"></i>
            平台公告
          </h2>
          <div class="announcement-tabs">
            <span 
              v-for="(tab, index) in ['全部', '系统', '更新', '活动']" 
              :key="index"
              :class="{ active: currentAnnouncementTab === tab }"
              @click="currentAnnouncementTab = tab"
            >
              {{ tab }}
            </span>
          </div>
        </div>
        
        <div class="announcements-grid">
          <div 
            v-for="announcement in filteredAnnouncements" 
            :key="announcement.id"
            class="announcement-card"
            @click="showAnnouncementDetail(announcement)"
          >
            <div class="announcement-icon">
              <i :class="getAnnouncementIcon(announcement.type)"></i>
            </div>
            <div class="announcement-content">
              <h3>{{ announcement.title }}</h3>
              <p>{{ announcement.summary }}</p>
              <div class="announcement-meta">
                <span class="date">
                  <i class="far fa-clock"></i>
                  {{ announcement.date }}
                </span>
                <span class="type" :class="announcement.type">
                  {{ announcement.type }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 公告详情弹窗 -->
      <!-- <el-dialog
        :visible.sync="showAnnouncementModal"
        width="50%"
        class="announcement-dialog"
      >
        <div class="announcement-detail" v-if="currentAnnouncement">
          <h2>{{ currentAnnouncement.title }}</h2>
          <div class="detail-meta">
            <span>
              <i class="far fa-clock"></i>
              {{ currentAnnouncement.date }}
            </span>
            <span>
              <i class="far fa-user"></i>
              {{ currentAnnouncement.author }}
            </span>
            <span :class="currentAnnouncement.type">
              {{ currentAnnouncement.type }}
            </span>
          </div>
          <div class="detail-content" v-html="currentAnnouncement.content"></div>
        </div>
      </el-dialog> -->
    </section>

    <!-- 修改搜索框部分 -->
    <div class="search-container">
      <div class="search-box">
        <select class="api-type-selector" v-model="selectedKind">
          <option value="all">所有类型</option>
          <option v-for="kind in kinds" :value="kind.categoryName" :key="kind.id">
            {{ kind.categoryName }}
          </option>
        </select>
        <div class="search-input-wrapper">
          <i class="fas fa-search search-icon"></i>
          <input
            type="text"
            placeholder="搜索目标API"
            v-model="searchKeywords"
            class="search-input"
          />
        </div>
        <button class="search-button" @click="searchApis">搜索</button>
      </div>
    </div>

    <section class="api-section">
      <h2 class="section-title">
        热门API推荐 <i class="fas fa-fire icon-flame"></i>
      </h2>
      
      <el-empty
        :description="'暂无数据'"
        v-if="popularApis.length === 0"
      ></el-empty>

      <div class="api-cards">
        <div class="api-card" 
             v-for="(api, index) in popularApis" 
             :key="index"
             :class="{ 'card-hover': hoveredCard === index }"
             @mouseenter="hoveredCard = index"
             @mouseleave="hoveredCard = null">
          
          <!-- 添加图片部分 -->
          <div class="api-image">
            <img :src="api.imageUrl || require('@/assets/images/default-image.svg')" :alt="api.name">
          </div>
          
          <div class="card-header">
            <div class="api-type">
              <i :class="getIconClassForType(api.icon)"></i>
              <span>{{ api.icon }}</span>
            </div>
            <div class="api-badges">
              <span v-if="api.isNew" class="badge badge-new">
                <i class="fas fa-bolt"></i> NEW
              </span>
              <span v-if="api.isCreate" class="badge badge-original">
                <i class="fas fa-crown"></i> 原创
              </span>
            </div>
          </div>

          <h3 class="api-title">{{ api.name }}</h3>
          <p class="api-description">{{ api.description }}</p>

          <div class="api-meta">
            <div class="meta-item">
              <i class="fas fa-star"></i>
              <span>{{ api.starts }}</span>
            </div>
            <div class="meta-item">
              <i class="fas fa-clock"></i>
              <span>{{ new Date(api.updatetime).toLocaleDateString() }}</span>
            </div>
            <div class="meta-item" :class="getStatusClass(api.status)">
              <i :class="['fas', getStatusIcon(api.status)]"></i>
              <span>{{ getApiStatusText(api.status) }}</span>
            </div>
          </div>

          <div class="card-actions">
            <button class="btn-primary" @click="toDetails(api)">
              <i class="fas fa-play-circle"></i>
              {{ translations.callAPI }}
            </button>
            <button class="btn-secondary" @click="showDetails(api)">
              <i class="fas fa-info-circle"></i>
              {{ translations.details }}
            </button>
          </div>
        </div>
      </div>
    </section>

    <div v-if="showDetailsModal" class="modal-overlay" @click.self="closeDetailsModal">
      <div class="modal-content">
        <div class="modal-header">
          <h3>{{ currentApi.name }} - 详细信息</h3>
          <button class="close-btn" @click="closeDetailsModal">
            <i class="fas fa-times"></i>
          </button>
        </div>
        
        <div class="modal-body">
          <div class="detail-section">
            <h4>{{ translations.callFormat }}</h4>
            <json-viewer
              :value="currentApi.testurl"
              :expanded="false"
              copyable
              sort
            ></json-viewer>
          </div>

          <div class="detail-section">
            <h4>{{ translations.responseExample }}</h4>
            <json-viewer
              :value="currentApi.respose"
              :expanded="false"
              copyable
              sort
            ></json-viewer>
          </div>

          <div class="detail-grid">
            <div class="detail-item">
              <span class="label">{{ translations.tokenRequirement }}</span>
              <span class="value">{{ currentApi.isneedtoken == 1 ? "需要" : "不需要" }}</span>
            </div>
            <div class="detail-item">
              <span class="label">{{ translations.updateTime }}</span>
              <span class="value">{{ currentApi.updatetime }}</span>
            </div>
            <div class="detail-item">
              <span class="label">{{ translations.provider }}</span>
              <span class="value">{{ currentApi.apiapply }}</span>
            </div>
            <div class="detail-item">
              <span class="label">{{ translations.status }}</span>
              <span class="value" :class="getStatusClass(currentApi.status)">
                {{ getApiStatusText(currentApi.status) }}
              </span>
            </div>
          </div>

          <div class="detail-section">
            <h4>{{ translations.notes }}</h4>
            <p class="note">{{ currentApi.note }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 作者推荐区域 -->
    <section class="creators-showcase">
      <div class="section-header">
        <h2>
          <i class="fas fa-crown"></i>
          {{ translations.excellentCreators }}
        </h2>
        <p class="section-desc">遇见优秀的开发者,发现更多可能</p>
      </div>

      <div class="creators-gallery" ref="creatorsContainer">
        <div class="creators-track" ref="creatorsTrack">
          <div 
            v-for="creator in creators" 
            :key="creator.id" 
            class="creator-card"
            @click="goToProfile(creator.id)"
          >
            <div class="creator-avatar">
              <el-avatar :size="80" :src="creator.icon"></el-avatar>
              <div class="creator-status" :class="creator.isOnline ? 'online' : ''"></div>
            </div>
            <div class="creator-info">
              <h3 class="creator-name">{{ creator.name }}</h3>
              <p class="creator-title">{{ creator.title }}</p>
              <div class="creator-stats">
                <div class="stat">
                  <i class="fas fa-code-branch"></i>
                  <span>{{ creator.apiCount }} APIs</span>
                </div>
                <div class="stat">
                  <i class="fas fa-star"></i>
                  <span>{{ creator.rating }}分</span>
                </div>
              </div>
            </div>
            <div class="creator-hover">
              <div class="hover-stats">
                <div class="hover-stat">
                  <span class="label">活跃度</span>
                  <div class="progress-bar">
                    <div 
                      class="progress" 
                      :style="{ width: creator.activity + '%' }"
                    ></div>
                  </div>
                </div>
                <div class="hover-stat">
                  <span class="label">响应率</span>
                  <div class="progress-bar">
                    <div 
                      class="progress" 
                      :style="{ width: creator.responseRate + '%' }"
                    ></div>
                  </div>
                </div>
              </div>
              <button class="view-profile">
                查看主页
                <i class="fas fa-arrow-right"></i>
              </button>
            </div>
          </div>
        </div>
        <button class="scroll-btn prev" @click="scrollCreators('prev')">
          <i class="fas fa-chevron-left"></i>
        </button>
        <button class="scroll-btn next" @click="scrollCreators('next')">
          <i class="fas fa-chevron-right"></i>
        </button>
      </div>
    </section>

    <!-- 系统更新日志 -->
    <section class="version-history">
      <div class="section-header">
        <h2>
          <i class="fas fa-history"></i>
          {{ translations.systemVersionLog }}
        </h2>
        <p class="section-desc">见证我们不断进步的脚步</p>
      </div>

      <div class="version-container">
        <div class="version-line"></div>
        <div 
          v-for="(version, index) in versions" 
          :key="index"
          class="version-card"
          :class="{ 'active': selectedVersion === index }"
          @click="selectedVersion = index"
        >
          <div class="version-dot"></div>
          <div class="version-content">
            <div class="version-header">
              <span class="version-number">{{ version.version }}</span>
              <span class="version-date">{{ version.date }}</span>
              <span class="version-tag" v-if="version.isLatest">最新</span>
            </div>
            <h3 class="version-title">{{ version.title }}</h3>
            <div class="version-details" v-show="selectedVersion === index">
              <div 
                v-for="(item, idx) in version.details" 
                :key="idx"
                class="update-item"
              >
                <i :class="getUpdateIcon(item.type)"></i>
                <span>{{ item.content }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 底部版权信息 -->
    <footer class="site-footer">
      <div class="footer-content">
        <div class="footer-section">
          <div class="footer-logo">
            <svg class="logo-svg" width="50" height="50" viewBox="0 0 128 128">
          <defs>
            <!-- 主渐变色 -->
            <linearGradient id="footer-logo-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
              <stop offset="0%" style="stop-color:#1a237e"/>
              <stop offset="100%" style="stop-color:#0d47a1"/>
            </linearGradient>
            
            <!-- 光效渐变 -->
            <linearGradient id="footer-glow-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
              <stop offset="0%" style="stop-color:rgba(255,255,255,0.2)"/>
              <stop offset="100%" style="stop-color:rgba(255,255,255,0)"/>
            </linearGradient>
          </defs>
          
          <!-- 背景六边形 -->
          <path 
            d="M64 8L112 36V92L64 120L16 92V36L64 8Z" 
            fill="url(#footer-logo-gradient)"
          />
          
          <!-- 光效层 -->
          <path 
            d="M64 8L112 36V92L64 120L16 92V36L64 8Z" 
            fill="url(#footer-glow-gradient)"
            opacity="0.5"
          />
           <!-- API 图形元素 -->
           <g transform="translate(32, 40)" fill="#fff">
            <!-- 字母 E 简化图形 -->
            <path d="M0 0H40V8H8V20H32V28H8V40H40V48H0V0Z"/>
            
            <!-- 装饰性连接线 -->
            <circle cx="50" cy="24" r="4"/>
            <path d="M54 24H64" stroke="#fff" stroke-width="2"/>
          </g>
          
          <!-- 动态圆点装饰 -->
          <circle cx="20" cy="20" r="2" fill="#fff" class="pulse-dot"/>
          <circle cx="108" cy="108" r="2" fill="#fff" class="pulse-dot"/>
        </svg>
        <div class="logo-text">
          <h2 class="brand-name">ETNOR-API</h2>
          <p class="brand-slogan">专注接口管理与研发</p>
        </div>
      </div>
          <p class="footer-desc">
            连接创新，驱动未来 - 您的API开放平台
          </p>
          <div class="social-links">
            <a href="#" class="social-link">
              <i class="fab fa-github"></i>
            </a>
            <a href="#" class="social-link">
              <i class="fab fa-weixin"></i>
            </a>
            <a href="#" class="social-link">
              <i class="fas fa-envelope"></i>
            </a>
          </div>
        </div>

        <div class="footer-section">
          <h4>快速链接</h4>
          <ul class="footer-links">
            <li><a href="#">API文档</a></li>
            <li><router-link to="/community">开发者社区</router-link></li>
            <li><router-link to="/help">帮助中心</router-link></li>
            <li><a href="#">关于我们</a></li>
          </ul>
        </div>

        <div class="footer-section">
          <h4>联系我们</h4>
          <ul class="contact-info">
            <li>
              <i class="fas fa-map-marker-alt"></i>
              <span>中国 · 深圳</span>
            </li>
            <li>
              <i class="fas fa-envelope"></i>
              <span>support@etnor.xyz</span>
            </li>
          </ul>
        </div>

        <div class="footer-section">
          <h4>订阅更新</h4>
          <p>订阅我们的新闻通讯,获取最新更新</p>
          <div class="subscribe-form">
            <input 
              type="email" 
              placeholder="输入您的邮箱"
              v-model="subscribeEmail"
            >
            <button @click="subscribe">
              <i class="fas fa-paper-plane"></i>
            </button>
          </div>
        </div>
      </div>

      <div class="footer-bottom">
        <div class="copyright">
          © 2024 E特尔诺. All rights reserved.
        </div>
        <div class="footer-meta">
          <router-link to="/privacy">隐私政策</router-link>
          <router-link to="/terms">服务条款</router-link>
          <router-link to="/cookie-policy">Cookie政策</router-link>
        </div>
      </div>
    </footer>

    <!-- 公告弹窗 -->
    <transition name="notice">
      <div v-if="showNotice" :class="['notice-container', {'mobile': isMobile}]">
        <div class="notice-content">
          <div class="notice-header">
            <div class="notice-title">
              <i class="fas fa-bullhorn"></i>
              <span>平台公告</span>
            </div>
            <div class="notice-actions">
              <button class="notice-btn" @click="hideNotice(false)">
                <span>稍后查看</span>
              </button>
              <button class="notice-btn primary" @click="hideNotice(true)">
                <i class="fas fa-check"></i>
                <span>已阅读</span>
              </button>
            </div>
          </div>
          
          <div class="notice-body">
            <div class="notice-item" v-for="(notice, index) in notices" :key="index">
              <div class="notice-item-header">
                <span class="notice-tag" :class="notice.type">{{ notice.type }}</span>
                <span class="notice-date">{{ notice.date }}</span>
              </div>
              <h3 class="notice-item-title">{{ notice.title }}</h3>
              <p class="notice-item-content">{{ notice.content }}</p>
            </div>
          </div>
        </div>
      </div>
    </transition>

    <!-- 滚动公告条 -->
    <div class="scrolling-notice-bar" v-if="showScrollNotice">
      <div class="notice-content">
        <div class="notice-icon">
          <i class="fas fa-bullhorn fa-shake"></i>
        </div>
        <div class="notice-scroll">
          <div class="scroll-wrapper">
            <span class="notice-text">
              <span class="highlight">🎉 重磅预告</span>
              <span class="divider">|</span>
              <span class="tag">AI助手</span>
              基于 DeepSeek 最新大语言模型，E特尔诺智能体即将上线！
              <span class="highlight">✨ 核心特性：</span>
              代码精确理解与生成、API 文档智能解析、自动化测试用例生成、多轮对话持续优化
              <span class="highlight">🚀 独特优势：</span>
              支持完整上下文推理、精准API调用、代码重构建议、性能优化分析
              <span class="highlight">🔥 限时福利：</span>
              首发用户可享受3个月免费高级版体验
              <span class="tag special">敬请期待</span>
            </span>
          </div>
        </div>
        <button class="notice-close" @click="closeScrollNotice">
          <i class="fas fa-times"></i>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import NoticeBar from './NoticeBar.vue'
import axios from "axios";
import JsonViewer from "vue-json-viewer";
import StepDevelop from "./StepDevelop.vue";
import Footer from "./FooterPage.vue";

export default {
  name: 'HomePage',
  components: {
    NoticeBar,
    JsonViewer,
    StepDevelop,
    Footer,
  },
  data() {
    return {
      apiCount: 0,
      creatorCount: 0,
      selectedKind: 'all',
      searchKeywords: '',
      latestNotice: '',
      kinds: [],
      apis: [],
      creators: [],
      searchedApis: [],
      error: null,
      showDetailsModal: false,
      currentApi: null,
      requestParams: "",
      formData: {},
      requestStatus: "",
      currentUrl: "",
      isApiTestPanelVisible: false,
      popularApis: [],
      activeCreatorIndex: null,
      scrollInterval: null,
      scrollPosition: 0,
      userSays: [],
      versions: [
       
        
      ],
      isMenuOpen: false,
      currentLanguage: 'zh',
      hoveredCard: null,
      translations: {
        feedback: "问题反馈",
        about: "关于我们",
        toolbox: "工具箱",
        monitorCenter: "监控中心",
        creatorEntry: "创作者入驻",
        popularApis: "热门API推荐",
        noData: "暂无数据",
        systemVersionLog: "系统版本更新日志",
        apiPlatform: "API开放平台",
        connectInnovation: "连接创新，驱动未来",
        discover: "发现、调用、创新 - 在这里找到适合您的API解决方案",
        availableAPIs: "可用API",
        activeDevelopers: "活跃开发者",
        uptime: "正常运行率",
        callAPI: "调用接口",
        details: "详情",
        callFormat: "调用格式",
        responseExample: "响应示例",
        tokenRequirement: "Token要求",
        updateTime: "更新时间",
        provider: "接口提供者",
        status: "接口状态",
        notes: "注意事项",
        excellentCreators: "优秀创作者",
        blog: "博客",
      },
      currentText: '',
      isShatterActive: false,
      textParticles: [],
      slogans: [
        "连接创新，驱动未来",
        "科技改变生活",
        "开放共赢，携手共进",
        "让开发更简单",
        "释放创新力量"
      ],
      currentIndex: 0,
      charIndex: 0,
      subscribeEmail: '',
      selectedVersion: 0,
      
      // 公告相关数据
      currentAnnouncementTab: '全部',
      announcements: [],
      showAnnouncementModal: false,
      currentAnnouncement: null,
      filteredAnnouncements: [],
      isDarkMode: false,
      currentSlide: 0,
      carouselSlides: [
        {
          image: 'https://images.unsplash.com/photo-1451187580459-43490279c0fa',
          title: '开放API生态系统',
          description: '连接创新，驱动未来 - 发现数千个强大的API',
          buttonText: '立即探索',
          action: () => this.$router.push('/api-market')
        },
        {
          image: 'https://images.unsplash.com/photo-1518432031352-d6fc5c10da5a',
          title: '开发者社区',
          description: '加入充满活力的开发者社区，分享经验与创意',
          buttonText: '加入社区',
          action: () => this.$router.push('/community')
        },
        {
          image: 'https://images.unsplash.com/photo-1504639725590-34d0984388bd',
          title: '安全可靠',
          description: '企业级安全保障，99.9%的服务可用性',
          buttonText: '了解更多',
          action: () => this.$router.push('/security')
        }
      ],
      carouselInterval: null,
      showNotice: false,
      notices: [
        {
          type: '系统',
          date: '2024-04-01',
          title: '系统更新通知',
          content: '我们刚刚完成了系统的全面升级，现在更加稳定和高效。'
        },
        {
          type: '更新',
          date: '2024-03-25',
          title: 'API接口优化',
          content: '我们优化了API接口的性能，现在响应速度更快了。'
        },
        {
          type: '活动',
          date: '2024-03-15',
          title: '新功能上线',
          content: '我们新增了API接口的权限控制功能，现在更加安全。'
        },
        {
          type: '通知',
          date: '2024-03-01',
          title: '服务维护通知',
          content: '我们将在3月1日进行一次服务维护，届时可能会影响API接口的访问。'
        }
      ],
      showScrollNotice: true,
    }
  },
  mounted() {
    document.title = "E特尔诺-首页";
    this.fetchCreators();
    this.createFakeCreators();
    this.createFakeUserSays();
    this.startScroll();
    this.getNotice();
    this.initializeAnimations();
    this.typeText();
    this.initBackground();
    this.getBaseUrl();
    
    // 添加设备检测和路由参数更新
    const deviceInfo = this.getDeviceInfo();
    const encodedDeviceInfo = btoa(encodeURIComponent(JSON.stringify(deviceInfo))); // 将设备信息转为 base64
    
    // 更新路由参数
    if (!this.$route.query.device) {
      this.$router.replace({ 
        query: { 
          ...this.$route.query, 
          device: encodedDeviceInfo 
        }
      });
    }
    
    // 初始化轮播
    this.startCarousel();
  },
  async created() {
    this.sendDeviceInfo();
    this.selectedKind = "all";
    try {
      const response = await axios.get("/api/apiList");
      if (response.status === 200 && response.data.code === 200) {
        this.apis = response.data.data;
        this.kinds = response.data.apiKinds;

        this.popularApis = this.apis.map((api) => {
          const now = new Date();
          const updateTime = new Date(api.updatetime);
          const diffTime = Math.abs(now - updateTime);
          const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
          api.isNew = diffDays < 7;
          api.isCreate = api.isCreate === 1;
          return api;
        });

        this.apiCount = this.apis.length;
        this.creatorCount = [...new Set(this.apis.map(api => api.talentid))].length;
      } else {
        throw new Error("Unexpected response status or code.");
      }
    } catch (error) {
      console.error("Error fetching API list:", error);
      this.error = error.message;
    }

    // 修改日志数据处理部分
    const logsResponse = await axios.get("/api/logs");
    if (logsResponse.status === 200 && logsResponse.data.code === 200) {
      // 按时间排序，最新的在前面
      const sortedLogs = logsResponse.data.data.sort((a, b) => {
        return new Date(b.time) - new Date(a.time);
      });
      
      this.versions = sortedLogs.map((log, index) => ({
        date: new Date(log.time).toISOString().split("T")[0],
        title: log.logname,
        version: log.version,
        details: [
          { 
            type: 'feature', 
            content: log.description
          }
        ],
        isLatest: index === 0  // 排序后的第一条为最新
      }));
    } else {
      throw new Error("Unexpected logs response status or code.");
    }
    
    // 获取公告列表
    this.fetchAnnouncements();
    
    // 从本地存储读取主题设置
    this.isDarkMode = localStorage.getItem('darkMode') === 'true';
    this.applyTheme();
  },
  methods: {
    async getNotice() {
      try {
        const response = await axios.get('/api/getNoticeCurrent');
        if (response.status === 200 && response.data.code === 200) {
          if(response.data.data.length > 0) {
            this.latestNotice = response.data.data[0].notice;
          }
        }
      } catch (error) {
        console.error('Error fetching notice:', error);
      }
    },
    goToProfile(id) {
      this.$router.push({ path: `/creator/${id}` });
    },
    toDetails(api) {
      this.$router.push({ path: `/api/details/${api.apiid}` });
    },
    showDetails(api) {
      this.currentApi = api;
      this.showDetailsModal = true;
    },
    openCallApiModal(api) {
      this.currentApi = api;
      this.isApiTestPanelVisible = true;
    },
    async callApi() {
      this.requestStatus = "loading";
      try {
        const response = await axios({
          method: this.currentApi.callFormat.method,
          url: this.currentApi.testurl,
          headers: { "Content-Type": "application/json" },
        });
        this.requestStatus = "success";
      } catch (error) {
        this.requestStatus = "error";
        console.error("请求错误:", error);
      }
    },
    closeCallApiModal() {
      this.isApiTestPanelVisible = false;
      this.formData = {};
      this.requestStatus = "";
    },
    getIconClassForType(type) {
      switch (type) {
        case "REST":
          return "fas fa-globe";
        case "GraphQL":
          return "fas fa-rocket";
        default:
          return "fas fa-question";
      }
    },
    closeDetailsModal() {
      this.showDetailsModal = false;
      this.currentApi = null;
    },
    getApiStatusText(status) {
      switch (status) {
        case 1:
          return "正常";
        case 0:
          return "异常";
        case 2:
          return "停用";
        case 3:
          return "更新中";
        default:
          return "未知状态";
      }
    },
    getStatusClass(status) {
      switch (status) {
        case 1:
          return "text-success";
        case 0:
          return "text-danger";
        case 2:
          return "text-secondary";
        case 3:
          return "text-warning";
        default:
          return "";
      }
    },
    getStatusIcon(status) {
      switch (status) {
        case 1:
          return 'fa-check-circle';
        case 0:
          return 'fa-exclamation-circle';
        case 2:
          return 'fa-pause-circle';
        case 3:
          return 'fa-sync fa-spin';
        default:
          return 'fa-question-circle';
      }
    },
    searchApis() {
      axios
        .post("/api/searchApi", {
          keywords: this.searchKeywords,
          catelog: this.selectedKind,
        })
        .then((response) => {
          if (response.data.code === 200) {
            this.searchedApis = response.data.data;
            this.popularApis = response.data.data;
          } else {
            console.error("搜索失败");
          }
        })
        .catch((error) => {
          console.error("请求错误:", error);
        });
    },
    async sendDeviceInfo() {
      try {
        const deviceInfo = this.getDeviceInfo();
        const response = await axios.post("/api/device-info", {
          deviceInfo: deviceInfo,
          encodedInfo: btoa(encodeURIComponent(JSON.stringify(deviceInfo)))
        });
      } catch (error) {
        console.error("Error saving device info:", error);
      }
    },
    async fetchCreators() {
      try {
        const response = await axios.get("/api/findDevelopers");
        if (response.data.code === 200) {
          this.creators = response.data.data;
        } else {
          console.error("获取创作者失败:", response.data.message);
        }
      } catch (error) {
        console.error("获取创作者错误:", error);
      }
    },
    startScroll() {
      if (this.scrollInterval) return;
      this.scrollInterval = setInterval(() => {
        if (!this.$refs.creatorsContent) return;
        this.scrollPosition += 1;
        const contentWidth = this.$refs.creatorsContent.scrollWidth;
        const containerWidth = this.$refs.creatorsContainer.clientWidth;

        if (this.scrollPosition >= contentWidth) {
          this.scrollPosition = 0;
        }

        this.$refs.creatorsContent.style.transform = `translateX(-${this.scrollPosition}px)`;
      }, 30);
    },
    stopScroll() {
      clearInterval(this.scrollInterval);
      this.scrollInterval = null;
    },
    createFakeCreators() {
      for (let i = 1; i <= 20; i++) {
        this.creators.push({
          name: `创作者${i}`,
          color: `hsl(${Math.random() * 360}, 100%, 50%)`,
          info: `这是创作者${i}的信息`,
        });
      }
      this.creators = [...this.creators, ...this.creators];
    },
    createFakeUserSays() {
      this.userSays = [
        "这款工具非常好用！",
        "真是太棒了，我强烈推荐",
        "使用体验非常流畅。",
        "客服服务态度很好，解决了我的问题！",
        "我会继续关注这个项目！",
      ];
    },
    toggleMenu() {
      console.log('Toggle menu clicked'); // 调试用
      this.isMenuOpen = !this.isMenuOpen;
      if (this.isMenuOpen) {
        document.body.style.overflow = 'hidden';
      } else {
        document.body.style.overflow = '';
      }
    },
    closeMenu() {
      console.log('Close menu clicked'); // 调试用
      this.isMenuOpen = false;
      document.body.style.overflow = '';
    },
    changeLanguage() {
      if (this.currentLanguage === "zh") {
        this.translations = {
          feedback: "问题反馈",
          about: "关于我们",
          toolbox: "工具",
          monitorCenter: "监控中心",
          creatorEntry: "创作者入驻",
          popularApis: "热门API推荐",
          noData: "暂无数据",
          systemVersionLog: "系统版本更新日志",
          apiPlatform: "API开放平台",
          connectInnovation: "连接创新，驱动未来",
          discover: "发现、调用、创新 - 在这里找到适合您的API解决方案",
          availableAPIs: "可用API",
          activeDevelopers: "活跃开发者",
          uptime: "正常运行率",
          callAPI: "调用接口",
          details: "详情",
          callFormat: "调用格式",
          responseExample: "响应示例",
          tokenRequirement: "Token要求",
          updateTime: "更新时间",
          provider: "接口提供者",
          status: "接口状态",
          notes: "注意事项",
          excellentCreators: "优秀创作者",
        };
      } else {
        this.translations = {
          feedback: "Feedback",
          about: "About Us",
          toolbox: "Toolbox",
          monitorCenter: "Monitor Center",
          creatorEntry: "Creator Entry",
          popularApis: "Popular APIs",
          noData: "No Data",
          systemVersionLog: "System Version Log",
          apiPlatform: "API Platform",
          connectInnovation: "Connect Innovation, Drive the Future",
          discover: "Discover, Call, Innovate - Find the API solutions that suit you here",
          availableAPIs: "Available APIs",
          activeDevelopers: "Active Developers",
          uptime: "Uptime",
          callAPI: "Call API",
          details: "Details",
          callFormat: "Call Format",
          responseExample: "Response Example",
          tokenRequirement: "Token Requirement",
          updateTime: "Update Time",
          provider: "Provider",
          status: "Status",
          notes: "Notes",
          excellentCreators: "Excellent Creators",
        };
      }
    },
    async typeText() {
      // 检查组件是否已经卸载
      if (!this.$el) return;
      
      const slogan = this.slogans[this.currentIndex];
      if (this.charIndex < slogan.length) {
        this.currentText = slogan.substring(0, this.charIndex + 1);
        this.charIndex++;
        const delay = Math.random() * 50 + 100;
        setTimeout(this.typeText, delay);
      } else {
        await new Promise(resolve => setTimeout(resolve, 2000));
        // 检查组件是否存在
        if (!this.$el) return;
        this.shatterText();
      }
    },

    shatterText() {
      // 检查组件是否已经卸载
      if (!this.$el) return;
      
      const text = this.currentText;
      
      // 先添加抖动效果
      const element = this.$el.querySelector('.typing-text');
      // 检查元素是否存在
      if (!element) return;
      
      element.style.animation = 'textShake 0.5s ease-in-out';
      
      // 抖动结束后开始碎片化
      setTimeout(() => {
        // 再次检查组件和元素是否存在
        if (!this.$el || !element) return;
        
        element.style.animation = 'none';
        this.textParticles = [];
        
        // 创建碎片
        for (let i = 0; i < text.length; i++) {
          const char = text[i];
          const angle = Math.random() * 360;
          const velocity = 2 + Math.random() * 3;
          const tx = Math.cos(angle) * velocity * 100;
          const ty = Math.sin(angle) * velocity * 100;
          const rot = (Math.random() - 0.5) * 720;

          this.textParticles.push({
            char,
            style: {
              '--tx': `${tx}px`,
              '--ty': `${ty}px`,
              '--rot': `${rot}deg`,
              left: `${(i / text.length) * 100}%`,
              top: '50%',
              transform: 'translate(-50%, -50%)'
            }
          });
        }

        this.isShatterActive = true;

        setTimeout(() => {
          // 最后一次检查组件是否存在
          if (!this.$el) return;
          
          this.isShatterActive = false;
          this.textParticles = [];
          this.currentIndex = (this.currentIndex + 1) % this.slogans.length;
          this.charIndex = 0;
          this.currentText = '';
          this.typeText();
        }, 1000);
      }, 500);
    },
    initializeAnimations() {
      // 初始化数据流
      const streams = document.querySelectorAll('.stream');
      streams.forEach(stream => {
        stream.style.setProperty('--x', `${Math.random() * 100}%`);
        stream.style.animationDelay = `${Math.random() * 4}s`;
      });

      // 初始化粒子
      const particles = document.querySelectorAll('.particle');
      particles.forEach(particle => {
        particle.style.setProperty('--x', `${Math.random() * 100}%`);
        particle.style.setProperty('--y', `${Math.random() * 100}%`);
        particle.style.setProperty('--endX', `${Math.random() * 100}%`);
        particle.style.setProperty('--endY', `${Math.random() * 100}%`);
        particle.style.animationDelay = `${Math.random() * 10}s`;
      });

      // 初始化数字雨
      const rainColumns = document.querySelectorAll('.rain-column');
      rainColumns.forEach(column => {
        column.style.left = `${Math.random() * 100}%`;
        column.style.setProperty('--delay', `${Math.random() * 20}s`);
        column.textContent = Array(20).fill(0)
          .map(() => String.fromCharCode(0x30A0 + Math.random() * 96))
          .join('');
      });
    },
    initBackground() {
      // 初始化光束
      document.querySelectorAll('.beam').forEach((beam, index) => {
        beam.style.left = `${index * 33}%`;
        beam.style.animationDelay = `${index * 2}s`;
      });

      // 初始化粒子
      document.querySelectorAll('.particle').forEach(particle => {
        particle.style.setProperty('--startX', `${Math.random() * 100}%`);
        particle.style.setProperty('--startY', `${Math.random() * 100}%`);
        particle.style.setProperty('--endX', `${Math.random() * 100}%`);
        particle.style.setProperty('--endY', `${Math.random() * 100}%`);
        particle.style.left = particle.style.getPropertyValue('--startX');
        particle.style.top = particle.style.getPropertyValue('--startY');
        particle.style.animationDelay = `${Math.random() * 10}s`;
      });

      // 初始化能量环
      document.querySelectorAll('.ring').forEach((ring, index) => {
        const size = (index + 1) * 200;
        ring.style.width = `${size}px`;
        ring.style.height = `${size}px`;
        ring.style.left = '50%';
        ring.style.top = '50%';
        ring.style.animationDelay = `${index * 0.5}s`;
      });

      // 初始化数据流
      document.querySelectorAll('.stream').forEach(stream => {
        stream.style.setProperty('--height', `${Math.random() * 200 + 100}px`);
        stream.style.setProperty('--x', `${Math.random() * 100}%`);
        stream.style.setProperty('--duration', `${Math.random() * 2 + 2}s`);
        stream.style.left = stream.style.getPropertyValue('--x');
      });
    },
    scrollCreators(direction) {
      const track = this.$refs.creatorsTrack;
      const scrollAmount = 300; // 每个卡片宽度
      if (direction === 'prev') {
        track.scrollLeft -= scrollAmount;
      } else if (direction === 'next') {
        track.scrollLeft += scrollAmount;
      }
    },
    getUpdateIcon(type) {
      switch (type) {
        case 'feature':
          return 'fas fa-plus-circle text-success';
        case 'improvement':
          return 'fas fa-arrow-up text-primary';
        case 'bugfix':
          return 'fas fa-bug text-warning';
        default:
          return 'fas fa-info-circle';
      }
    },
    subscribe() {
      // 这里应该添加订阅逻辑
      console.log('Subscribed:', this.subscribeEmail);
    },
    
    // 获取公告列表
    async fetchAnnouncements() {
      try {
        const response = await axios.get('/api/announcements');
        if (response.data.code === 200) {
          this.filteredAnnouncements = response.data.data;
        }
      } catch (error) {
        console.error('获取公告失败:', error);
      }
    },
    
    // 获取公告图标
    getAnnouncementIcon(type) {
      const icons = {
        '系统': 'fas fa-cog',
        '更新': 'fas fa-sync',
        '活': 'fas fa-star',
        '通知': 'fas fa-bell'
      };
      return icons[type] || 'fas fa-bullhorn';
    },
    
    // 显示公告详情
    showAnnouncementDetail(announcement) {
      this.currentAnnouncement = announcement;
      this.showAnnouncementModal = true;
    },
    
    toggleTheme() {
      this.isDarkMode = !this.isDarkMode;
      localStorage.setItem('darkMode', this.isDarkMode);
      this.applyTheme();
    },
    
    applyTheme() {
      document.documentElement.classList.toggle('dark-theme', this.isDarkMode);
      // 触发主题变化的过渡动画
      document.documentElement.style.setProperty(
        '--theme-transition-timing', 
        'cubic-bezier(0.4, 0, 0.2, 1)'
      );
    },
    prevSlide() {
      this.currentSlide = (this.currentSlide - 1 + this.carouselSlides.length) % this.carouselSlides.length;
    },
    
    nextSlide() {
      this.currentSlide = (this.currentSlide + 1) % this.carouselSlides.length;
    },
    
    goToSlide(index) {
      this.currentSlide = index;
    },
    
    startCarousel() {
      this.carouselInterval = setInterval(() => {
        this.nextSlide();
      }, 5000);
    },
    
    stopCarousel() {
      clearInterval(this.carouselInterval);
    },
    getDeviceInfo() {
      const ua = navigator.userAgent;
      const device = {
        userAgent: ua,
        isPC: !(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(ua)),
        isMobile: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(ua),
        browser: this.getBrowserInfo(),
        screen: {
          width: window.screen.width,
          height: window.screen.height
        },
        timestamp: new Date().getTime(),
        randomId: Math.random().toString(36).substring(2)
      };
      return device;
    },
    getBrowserInfo() {
      const ua = navigator.userAgent;
      let browser = "unknown";
      
      if (ua.indexOf("Chrome") > -1) browser = "Chrome";
      else if (ua.indexOf("Safari") > -1) browser = "Safari";
      else if (ua.indexOf("Firefox") > -1) browser = "Firefox";
      else if (ua.indexOf("Edge") > -1) browser = "Edge";
      else if (ua.indexOf("MSIE") > -1 || ua.indexOf("Trident/") > -1) browser = "IE";
      
      return {
        name: browser,
        version: this.getBrowserVersion(browser)
      };
    },
     //获取基础url
   async getBaseUrl() {
      const baseUrl = await axios.get('/api/getBaseUrl/bocker');
      //把baseUrl写入localStorage
      localStorage.setItem('baseUrl', baseUrl.data.message);
    },
    getBrowserVersion(browser) {
      const ua = navigator.userAgent;
      let version = "unknown";
      
      switch(browser) {
        case "Chrome":
          version = ua.match(/Chrome\/([0-9.]+)/)?.[1];
          break;
        case "Safari":
          version = ua.match(/Version\/([0-9.]+)/)?.[1];
          break;
        case "Firefox":
          version = ua.match(/Firefox\/([0-9.]+)/)?.[1];
          break;
        case "Edge":
          version = ua.match(/Edge\/([0-9.]+)/)?.[1];
          break;
        case "IE":
          version = ua.match(/(MSIE |rv:)([0-9.]+)/)?.[2];
          break;
      }
      return version;
    },
    hideNotice(read) {
      this.showNotice = false;
      if (read) {
        // 这里可以添加用户阅读后的处理逻辑
        console.log('Notice marked as read');
      }
    },
    closeScrollNotice() {
      this.showScrollNotice = false;
    }
  },
  // 添加组件销毁时的清理
  beforeDestroy() {
    // 清除所有状态
    this.currentText = '';
    this.isShatterActive = false;
    this.textParticles = [];
    this.currentIndex = 0;
    this.charIndex = 0;
    this.stopCarousel();
    document.body.style.overflow = '';
  },
  computed: {
    isMobile() {
      return window.innerWidth <= 768;
    }
  }
}
</script>

<style scoped>
.home-page {
  min-height: 100vh;
  background-color: #f5f7fa;
  overflow-x: hidden; /* 禁止左右滚动 */
}

/* 移除之前所有的背景相关样式，添加新的背景样式 */
.hero-section {
  position: relative;
  padding: 6rem 2rem;
  margin-top: 60px;
  overflow: hidden;
  min-height: 600px; /* 增加高度以适应新布局 */
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.background-svg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* 现代背景设计 */
.modern-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* 渐变叠加层 */
.gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    125deg,
    rgba(79, 86, 170, 0.5) 0%,
    rgba(11, 20, 55, 0.8) 50%,
    rgba(22, 25, 50, 0.9) 100%
  );
}

/* 装饰形状 */
.accent-shape {
  position: absolute;
  top: -50%;
  right: -20%;
  width: 80%;
  height: 200%;
  background: linear-gradient(
    135deg,
    rgba(103, 116, 236, 0.12) 0%,
    rgba(73, 84, 177, 0.05) 100%
  );
  transform: rotate(-15deg);
  border-radius: 100px 0 0 100px;
  box-shadow: inset 0 0 50px rgba(103, 116, 236, 0.1);
}

/* 调整内容层级和样式 */
.hero-content {
  position: relative;
  z-index: 1;
  max-width: 1400px; /* 增加最大宽度 */
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 4rem;
}

.hero-left {
  flex: 1;
  max-width: 600px;
}

.hero-carousel {
  flex: 1;
  max-width: 650px;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.gradient-text {
  background: linear-gradient(135deg, #fff 0%, #E2E8FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.subtitle {
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.9);
}

.hero-description {
  font-size: 1.2rem;
  max-width: 600px;
  margin-bottom: 2rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
}

/* 统计卡片样式优化 */
.hero-stats {
  display: flex;
  gap: 3rem;
  margin-top: 3rem;
}

.stat-item {
  text-align: center;
  background: rgba(255, 255, 255, 0.03);
  padding: 1.5rem 2rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  transition: transform 0.3s ease;
}

.stat-item:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.05);
}

.stat-item i {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  background: linear-gradient(135deg, #6774EC 0%, #4954B1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat-number {
  display: block;
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0.5rem 0;
  background: linear-gradient(135deg, #fff 0%, #E2E8FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat-label {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .hero-content {
    flex-direction: column;
    gap: 2rem;
  }

  .hero-left {
    max-width: 100%;
    text-align: center;
  }

  .hero-carousel {
    max-width: 100%;
  }

  .hero-stats {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .hero-section {
    padding: 4rem 1rem;
  }

  .carousel {
    height: 300px;
  }

  .slide-title {
    font-size: 1.8rem;
  }

  .slide-description {
    font-size: 1rem;
  }
}

/* 导航栏样式优化 */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(26, 35, 126, 0.08);
  height: 64px;
}

.navbar-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-brand {
  display: flex;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

.logo-svg {
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 2px 4px rgba(26, 35, 126, 0.2));
}

.logo-text {
  font-size: 1.25rem;
  font-weight: 800;
  color: #1a237e;
  letter-spacing: 0.5px;
}

.logo-domain {
  font-size: 0.9rem;
  color: #666;
  font-weight: 400;
  opacity: 0.8;
  margin-left: 0.5rem;
  position: relative;
  padding-left: 0.75rem;
}

.logo-domain::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: #666;
  opacity: 0.3;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.navbar-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #1a237e;
  text-decoration: none;
  font-weight: 500;
  padding: 0.5rem;
  transition: all 0.3s ease;
  border-radius: 8px;
}

.nav-link i {
  font-size: 1.1rem;
}

.nav-link:hover {
  background: rgba(26, 35, 126, 0.05);
  transform: translateY(-2px);
}

.nav-link.highlight {
  background: linear-gradient(135deg, #1a237e, #0d47a1);
  color: white;
  padding: 0.5rem 1rem;
}

.nav-link.highlight:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(26, 35, 126, 0.2);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.theme-toggle:hover {
  background: rgba(26, 35, 126, 0.05);
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #1a237e;
  cursor: pointer;
  padding: 0.5rem;
}

/* 响应式调整 */
@media (max-width: 1024px) {
  .navbar-container {
    padding: 0.8rem 1rem;
  }

  .nav-menu {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    background: white;
    flex-direction: column;
    padding: 1rem;
    gap: 1rem;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .nav-menu.menu-open {
    transform: translateY(0);
  }

  .navbar-links {
    flex-direction: column;
    width: 100%;
  }

  .nav-link {
    padding: 0.8rem;
    width: 100%;
    justify-content: center;
  }

  .menu-toggle {
    display: block;
  }
}

.menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 999; /* 确保在导航菜单下方 */
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none; /* 添加这一行 */
}

.menu-overlay.active {
  display: block;
  opacity: 1;
  pointer-events: auto; /* 添加这一行 */
}

/* API区域样式 */
.api-section {
  padding: 6rem 0;
  background: linear-gradient(135deg, #f8faff 0%, #ffffff 100%);
  position: relative;
  overflow: hidden;
}

.api-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(26, 35, 126, 0.1), transparent);
}

.section-title {
  text-align: center;
  margin-bottom: 4rem;
  color: #1a237e;
  font-size: 2.5rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #1a237e, #0d47a1);
  border-radius: 3px;
}

.icon-flame {
  color: #ff4081;
  animation: flicker 2s infinite;
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

.api-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2.5rem;
  padding: 0 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

.api-card {
  background: white;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(26, 35, 126, 0.08);
  box-shadow: 0 4px 20px rgba(26, 35, 126, 0.05);
}

.api-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(26, 35, 126, 0.12);
}

.api-image {
  width: 100%;
  height: 180px;
  position: relative;
  background: linear-gradient(135deg, #f8faff 0%, #e8eaf6 100%);
}

.api-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.api-image img[src$="default-image.svg"] {
  object-fit: contain;
  padding: 2rem;
  opacity: 0.8;
}

.api-card:hover .api-image img {
  transform: scale(1.05);
}

.card-content {
  padding: 1.5rem;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.api-type {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: #1a237e;
  font-weight: 500;
}

.api-type i {
  font-size: 1.1rem;
}

.api-badges {
  display: flex;
  gap: 0.5rem;
}

.badge {
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}

.badge-new {
  background: linear-gradient(135deg, #ff4081, #f50057);
  color: white;
}

.badge-original {
  background: linear-gradient(135deg, #ffd700, #ffa000);
  color: white;
}

.api-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #1a237e;
  margin: 0.5rem 0;
  line-height: 1.4;
}

.api-description {
  color: #666;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.api-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid rgba(26, 35, 126, 0.08);
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #666;
  font-size: 0.9rem;
}

.meta-item i {
  color: #1a237e;
}

.card-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.btn-primary, .btn-secondary {
  flex: 1;
  padding: 0.8rem 1.2rem;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-primary {
  background: linear-gradient(135deg, #1a237e, #0d47a1);
  color: white;
}

.btn-secondary {
  background: rgba(26, 35, 126, 0.1);
  color: #1a237e;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(26, 35, 126, 0.2);
}

.btn-secondary:hover {
  background: rgba(26, 35, 126, 0.15);
  transform: translateY(-2px);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .api-section {
    padding: 4rem 0;
  }

  .section-title {
    font-size: 2rem;
  }

  .api-cards {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    padding: 0 1rem;
  }

  .api-image {
    height: 160px;
  }

  .card-content {
    padding: 1.2rem;
  }

  .api-title {
    font-size: 1.2rem;
  }

  .btn-primary, .btn-secondary {
    padding: 0.7rem 1rem;
    font-size: 0.9rem;
  }
}

/* 详情弹样式 */
.modal-content {
  background: white;
  border-radius: 16px;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 2rem;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.detail-section {
  margin-bottom: 2rem;
}

.detail-section h4 {
  color: #2c3e50;
  margin-bottom: 1rem;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin: 2rem 0;
  background: #f8f9fa;
  padding: 1.5rem;
  border-radius: 12px;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.detail-item .label {
  color: #666;
  font-weight: 500;
}

.note {
  background: #f8f9fa;
  padding: 1rem;
  border-radius: 8px;
  color: #666;
  line-height: 1.6;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .api-section {
    padding: 2rem 1rem;
  }

  .api-cards {
    grid-template-columns: 1fr;
  }

  .detail-grid {
    grid-template-columns: 1fr;
  }

  .modal-content {
    width: 95%;
    padding: 1.5rem;
  }
}

/* 作者推荐区域样式 */
.creators-showcase {
  padding: 4rem 0;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.section-header h2 {
  font-size: 2.5rem;
  color: #1a237e;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.section-header i {
  color: #ffd700;
}

.section-desc {
  color: #666;
  font-size: 1.1rem;
}

.creators-gallery {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 4rem;
  overflow: hidden;
}

.creators-track {
  display: flex;
  gap: 2rem;
  transition: transform 0.5s ease;
}

.creator-card {
  flex: 0 0 300px;
  background: white;
  border-radius: 16px;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.creator-card:hover {
  transform: translateY(-10px);
}

.creator-avatar {
  position: relative;
  width: fit-content;
  margin: 0 auto 1.5rem;
}

.creator-status {
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ccc;
  border: 2px solid white;
}

.creator-status.online {
  background: #4caf50;
}

.creator-info {
  text-align: center;
}

.creator-name {
  font-size: 1.2rem;
  color: #1a237e;
  margin-bottom: 0.5rem;
}

.creator-title {
  color: #666;
  margin-bottom: 1rem;
}

.creator-stats {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

.stat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #666;
}

.creator-hover {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  padding: 1.5rem;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.creator-card:hover .creator-hover {
  transform: translateY(0);
}

.hover-stats {
  margin-bottom: 1rem;
}

.hover-stat {
  margin-bottom: 0.5rem;
}

.hover-stat .label {
  display: block;
  margin-bottom: 0.25rem;
  color: #666;
  font-size: 0.9rem;
}

.progress-bar {
  height: 6px;
  background: #eee;
  border-radius: 3px;
  overflow: hidden;
}

.progress {
  height: 100%;
  background: linear-gradient(90deg, #4285f4, #34a853);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.view-profile {
  width: 100%;
  padding: 0.75rem;
  border: none;
  border-radius: 8px;
  background: #1a237e;
  color: white;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.view-profile:hover {
  background: #0d47a1;
}

.scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: white;
  color: #1a237e;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.scroll-btn:hover {
  background: #1a237e;
  color: white;
}

.scroll-btn.prev {
  left: 0;
}

.scroll-btn.next {
  right: 0;
}

/* 版本历史样式 */
.version-history {
  padding: 4rem 0;
  background: white;
}

.version-container {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  padding: 2rem 0;
}

.version-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e0e7ff;
  transform: translateX(-50%);
}

.version-card {
  position: relative;
  margin-bottom: 2rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.version-card:hover .version-content {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.version-dot {
  position: absolute;
  left: 50%;
  top: 1.5rem;
  width: 16px;
  height: 16px;
  background: white;
  border: 2px solid #4285f4;
  border-radius: 50%;
  transform: translateX(-50%);
  transition: all 0.3s ease;
}

.version-card.active .version-dot {
  background: #4285f4;
  box-shadow: 0 0 0 4px rgba(66, 133, 244, 0.2);
}

.version-content {
  width: calc(50% - 30px);
  padding: 1.5rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  margin-left: calc(50% + 30px);
  transition: all 0.3s ease;
}

.version-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.version-date {
  color: #666;
  font-size: 0.9rem;
}

.version-tag {
  padding: 0.25rem 0.75rem;
  background: linear-gradient(45deg, #4285f4, #34a853);
  color: white;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
}

.version-title {
  font-size: 1.2rem;
  color: #1a237e;
  margin-bottom: 1rem;
  font-weight: 600;
}

.version-details {
  display: grid;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid #eee;
}

.update-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.update-item:hover {
  background: rgba(66, 133, 244, 0.05);
}

.update-item i {
  margin-top: 0.25rem;
  font-size: 1rem;
}

.update-item i.text-success {
  color: #34a853;
}

.update-item i.text-primary {
  color: #4285f4;
}

.update-item i.text-warning {
  color: #fbbc05;
}

/* 偶数卡片样式 */
.version-card:nth-child(even) .version-content {
  margin-left: 0;
  margin-right: calc(50% + 30px);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .version-content {
    width: calc(100% - 30px);
    margin-left: 30px !important;
  }

  .version-line {
    left: 0;
  }

  .version-dot {
    left: 0;
  }
}

/* 底部版权样式 */
.site-footer {
  background: #1a237e;
  color: white;
  padding: 4rem 0 0;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 3rem;
  margin-bottom: 3rem;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.footer-logo img {
  width: 40px;
  height: 40px;
}

.logo-text h3 {
  font-size: 1.5rem;
  margin: 0;
}

.logo-text p {
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.footer-desc {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1.5rem;
}

.social-links {
  display: flex;
  gap: 1rem;
}

.social-link {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.social-link:hover {
  background: white;
  color: #1a237e;
}

.footer-section h4 {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 0.75rem;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: all 0.3s ease;
}

.footer-links a:hover {
  color: white;
}

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact-info li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
}

.subscribe-form {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.subscribe-form input {
  flex: 1;
  padding: 0.75rem;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.subscribe-form input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.subscribe-form button {
  padding: 0.75rem;
  border: none;
  border-radius: 8px;
  background: white;
  color: #1a237e;
  cursor: pointer;
  transition: all 0.3s ease;
}

.subscribe-form button:hover {
  background: #e3f2fd;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.5rem 0;
  text-align: center;
}

.copyright {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1rem;
}

.footer-meta {
  display: flex;
  justify-content: center;
  gap: 2rem;
}

.footer-meta a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: all 0.3s ease;
}

.footer-meta a:hover {
  color: white;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .creators-gallery {
    padding: 0 2rem;
  }

  .version-content {
    width: calc(100% - 30px);
    margin-left: 30px !important;
  }

  .version-line {
    left: 0;
  }

  .version-dot {
    left: 0;
  }

  .footer-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.typing-container {
  height: 60px;
  margin: 1rem 0;
  perspective: 1000px;
}

.typing-text {
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  position: relative;
  transform-style: preserve-3d;
}

.cursor {
  display: inline-block;
  margin-left: 2px;
  animation: blink 1s step-start infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

.text-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.particle {
  position: absolute;
  color: #fff;
  font-weight: 700;
  font-size: 2rem;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  pointer-events: none;
  animation: particleFade 1s ease-out forwards;
}

@keyframes particleFade {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(var(--tx), var(--ty)) rotate(var(--rot));
  }
}

.search-container {
  position: relative;
  margin-top: -30px;
  padding: 0 2rem;
  z-index: 10;
}

.search-box {
  max-width: 800px;
  margin: 0 auto;
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  gap: 1rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.api-type-selector {
  min-width: 150px;
  padding: 0.8rem 1rem;
  border: 1px solid #e0e7ff;
  border-radius: 8px;
  color: #1a237e;
  background: #fff;
  font-weight: 500;
  transition: all 0.3s ease;
}

.api-type-selector:hover {
  border-color: #4285f4;
}

.search-input-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 1rem;
  color: #94a3b8;
}

.search-input {
  width: 100%;
  padding: 0.8rem 1rem 0.8rem 2.5rem;
  border: 1px solid #e0e7ff;
  border-radius: 8px;
  font-size: 1rem;
  color: #1a237e;
  transition: all 0.3s ease;
}

.search-input:focus {
  outline: none;
  border-color: #4285f4;
  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.1);
}

.search-button {
  padding: 0.8rem 2rem;
  background: linear-gradient(135deg, #4285f4, #3367d6);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.search-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(66, 133, 244, 0.2);
}

/* 公告区样式 */
.announcements-section {
  padding: 4rem 0;
  background: #fff;
}

.announcements-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.section-header h2 {
  font-size: 1.8rem;
  color: #1a237e;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.section-header i {
  color: #4285f4;
}

.announcement-tabs {
  display: flex;
  gap: 1rem;
}

.announcement-tabs span {
  padding: 0.5rem 1.5rem;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

.announcement-tabs span:hover {
  background: rgba(66, 133, 244, 0.1);
  color: #4285f4;
}

.announcement-tabs span.active {
  background: #4285f4;
  color: white;
}

.announcements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}

.announcement-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  gap: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #eee;
}

.announcement-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  border-color: #4285f4;
}

.announcement-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(66, 133, 244, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4285f4;
  font-size: 1.5rem;
}

.announcement-content {
  flex: 1;
}

.announcement-content h3 {
  font-size: 1.1rem;
  color: #1a237e;
  margin-bottom: 0.5rem;
}

.announcement-content p {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.announcement-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
}

.announcement-meta .date {
  color: #999;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.announcement-meta .type {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-weight: 500;
}

.type.系统 { background: rgba(66, 133, 244, 0.1); color: #4285f4; }
.type.更新 { background: rgba(52, 168, 83, 0.1); color: #34a853; }
.type.活动 { background: rgba(251, 188, 5, 0.1); color: #fbbc05; }
.type.通知 { background: rgba(234, 67, 53, 0.1); color: #ea4335; }

/* 公告详情弹窗样式 */
.announcement-dialog {
  border-radius: 16px;
}

.announcement-detail {
  padding: 1rem;
}

.announcement-detail h2 {
  font-size: 1.5rem;
  color: #1a237e;
  margin-bottom: 1rem;
}

.detail-meta {
  display: flex;
  gap: 2rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
  color: #666;
}

.detail-meta span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.detail-content {
  line-height: 1.8;
  color: #333;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .announcements-container {
    padding: 0 1rem;
  }
  
  .section-header {
    flex-direction: column;
    gap: 1rem;
  }
  
  .announcement-tabs {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 0.5rem;
  }
  
  .announcement-tabs span {
    white-space: nowrap;
  }
  
  .announcements-grid {
    grid-template-columns: 1fr;
  }
  
  .announcement-dialog {
    width: 90% !important;
  }
}

/* 主题切换按钮样式 */
.theme-toggle {
  position: relative;
  width: 80px;
  height: 40px;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  padding: 0;
  background: none;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(to bottom, #7eb9f5, #4481eb);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark .toggle-wrapper {
  background: linear-gradient(to bottom, #1a237e, #0d47a1);
}

.toggle-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 星星样式 */
.stars {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.dark .stars {
  opacity: 1;
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  animation: twinkle 1.5s infinite ease-in-out;
}

.star:nth-child(1) { top: 20%; left: 20%; }
.star:nth-child(2) { top: 30%; left: 60%; animation-delay: 0.3s; }
.star:nth-child(3) { top: 40%; left: 80%; animation-delay: 0.6s; }
.star:nth-child(4) { top: 60%; left: 30%; animation-delay: 0.9s; }
.star:nth-child(5) { top: 70%; left: 70%; animation-delay: 1.2s; }

/* 云朵样式 */
.clouds {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity 0.5s ease;
}

.dark .clouds {
  opacity: 0;
}

.cloud {
  position: absolute;
  width: 16px;
  height: 6px;
  background: white;
  border-radius: 6px;
  animation: float 3s infinite ease-in-out;
}

.cloud::before,
.cloud::after {
  content: '';
  position: absolute;
  top: -4px;
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
}

.cloud::before { left: 2px; }
.cloud::after { right: 2px; }

.cloud:nth-child(1) { top: 25%; left: 10%; animation-delay: 0s; }
.cloud:nth-child(2) { top: 45%; left: 50%; animation-delay: 1s; }
.cloud:nth-child(3) { top: 65%; left: 80%; animation-delay: 2s; }

/* 太阳/月亮样式 */
.celestial {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark .celestial {
  left: calc(100% - 30px);
}

.sun-moon {
  width: 24px;
  height: 24px;
  background: #ffd700;
  border-radius: 50%;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  transform: scale(1);
}

.dark .sun-moon {
  background: #ffffff;
  transform: scale(0.9);
}

/* 月球陨石坑 */
.crater {
  position: absolute;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.dark .crater {
  opacity: 1;
}

.crater:nth-child(1) { width: 6px; height: 6px; top: 25%; left: 25%; }
.crater:nth-child(2) { width: 4px; height: 4px; top: 50%; left: 50%; }
.crater:nth-child(3) { width: 5px; height: 5px; bottom: 25%; right: 25%; }

/* 动画关键帧 */
@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* 深色主题全局样式 */
:root {
  --theme-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
  --theme-transition-duration: 0.5s;
}

.dark-theme {
  --bg-color: #1a1a1a;
  --text-color: #ffffff;
  --card-bg: #2d2d2d;
  --border-color: #404040;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .theme-toggle {
    width: 60px;
    height: 30px;
  }
  
  .sun-moon {
    width: 18px;
    height: 18px;
  }
  
  .cloud {
    transform: scale(0.8);
  }
}

.carousel-section {
  padding: 2rem 0;
  background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);
}

.carousel-container {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.carousel {
  position: relative;
  height: 400px;
}

.carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.slide-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(26, 35, 126, 0.9) 0%,
    rgba(26, 35, 126, 0.7) 50%,
    rgba(26, 35, 126, 0.4) 100%
  );
  display: flex;
  align-items: center;
  padding: 0 5rem;
}

.slide-content {
  max-width: 600px;
  color: white;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0.3s;
}

.carousel-slide.active .slide-content {
  opacity: 1;
  transform: translateY(0);
}

.slide-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  background: linear-gradient(45deg, #fff, #e3f2fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.slide-description {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

.slide-button {
  padding: 1rem 2rem;
  border: none;
  border-radius: 30px;
  background: linear-gradient(45deg, #42a5f5, #1976d2);
  color: white;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
}

.slide-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(25, 118, 210, 0.3);
}

.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.carousel-control:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-50%) scale(1.1);
}

.carousel-control.prev {
  left: 20px;
}

.carousel-control.next {
  right: 20px;
}

.carousel-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 1rem;
}

.indicator {
  width: 40px;
  height: 4px;
  border: none;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator.active {
  background: white;
  transform: scaleX(1.5);
}

@media (max-width: 768px) {
  .carousel {
    height: 300px;
  }

  .slide-overlay {
    padding: 0 2rem;
  }

  .slide-title {
    font-size: 1.8rem;
  }

  .slide-description {
    font-size: 1rem;
  }

  .carousel-control {
    width: 40px;
    height: 40px;
  }
}

.home-footer {
  background: linear-gradient(135deg, #1a237e 0%, #0d47a1 100%);
  padding: 2rem 0;
  margin-top: 3rem;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.footer-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.logo-svg {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
  transition: transform 0.3s ease;
}

.logo-svg:hover {
  transform: scale(1.05);
}

.logo-text {
  text-align: left;
}

.brand-name {
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: 1px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
  background: linear-gradient(135deg, #fff 0%, #e3f2fd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand-slogan {
  color: rgba(255,255,255,0.9);
  font-size: 1.1rem;
  margin: 0.5rem 0 0;
  font-weight: 300;
  letter-spacing: 1px;
}

/* 动画效果 */
@keyframes pulse {
  0% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0.4; transform: scale(1); }
}

.pulse-dot {
  animation: pulse 2s infinite;
}

.pulse-dot:nth-child(2) {
  animation-delay: 1s;



}

/* 响应式调整 */
@media (max-width: 768px) {
  .footer-logo {
    flex-direction: column;
    text-align: center;
  }
  
  .logo-text {
    text-align: center;
  }
  
  .brand-name {
    font-size: 1.8rem;
  }
  
  .brand-slogan {
    font-size: 1rem;
  }
}

.version-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.version-number {
  font-family: 'Monaco', 'Courier New', monospace;
  font-weight: 600;
  color: #1a237e;
  background: rgba(26, 35, 126, 0.1);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
}

.version-card.active .version-number {
  color: #fff;
  background: linear-gradient(135deg, #1a237e, #0d47a1);
}

.version-tag {
  background: #ff4081;
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}


.version-date {
  color: #666;
  font-size: 14px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .version-meta {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .version-number {
    font-size: 12px;
    padding: 3px 6px;
  }
}

/* 搜索区域样式 */
.search-container {
  position: relative;
  margin-top: -30px;
  padding: 0 2rem;
  z-index: 10;
}

.search-box {
  max-width: 800px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  gap: 1rem;
  box-shadow: 0 8px 32px rgba(26, 35, 126, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.api-type-selector {
  min-width: 150px;
  padding: 0.8rem 1.2rem;
  border: 1px solid rgba(26, 35, 126, 0.1);
  border-radius: 12px;
  color: #1a237e;
  background: white;
  font-weight: 500;
  transition: all 0.3s ease;
  cursor: pointer;
}

.api-type-selector:hover {
  border-color: #1a237e;
  box-shadow: 0 2px 8px rgba(26, 35, 126, 0.08);
}

.search-input-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 1rem;
  color: #1a237e;
  font-size: 1.1rem;
}

.search-input {
  width: 100%;
  padding: 0.8rem 1rem 0.8rem 2.5rem;
  border: 1px solid rgba(26, 35, 126, 0.1);
  border-radius: 12px;
  font-size: 1rem;
  color: #1a237e;
  transition: all 0.3s ease;
}

.search-input:focus {
  outline: none;
  border-color: #1a237e;
  box-shadow: 0 0 0 3px rgba(26, 35, 126, 0.1);
}

.search-button {
  padding: 0.8rem 1.5rem;
  background: linear-gradient(135deg, #1a237e, #0d47a1);
  color: white;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.search-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(26, 35, 126, 0.2);
}

/* 公告区域样式 */
.announcements-section {
  padding: 4rem 0;
  background: linear-gradient(135deg, #f8faff 0%, #ffffff 100%);
  position: relative;
}

.announcements-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.announcements-header {
  text-align: center;
  margin-bottom: 3rem;
}

.announcements-header h2 {
  font-size: 2.2rem;
  color: #1a237e;
  margin-bottom: 1rem;
  font-weight: 700;
}

.announcement-tabs {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.announcement-tabs span {
  padding: 0.6rem 1.5rem;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
  color: #666;
  background: rgba(26, 35, 126, 0.05);
}

.announcement-tabs span:hover {
  background: rgba(26, 35, 126, 0.1);
  color: #1a237e;
}

.announcement-tabs span.active {
  background: linear-gradient(135deg, #1a237e, #0d47a1);
  color: white;
}

.announcements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}

.announcement-card {
  background: white;
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  gap: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(26, 35, 126, 0.08);
  box-shadow: 0 4px 20px rgba(26, 35, 126, 0.05);
}

.announcement-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(26, 35, 126, 0.12);
  border-color: rgba(26, 35, 126, 0.15);
}

.announcement-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(26, 35, 126, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a237e;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.announcement-content {
  flex: 1;
}

.announcement-content h3 {
  font-size: 1.1rem;
  color: #1a237e;
  margin-bottom: 0.5rem;
  font-weight: 600;
  line-height: 1.4;
}

.announcement-content p {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.6;
}

.announcement-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
}

.announcement-meta .date {
  color: #666;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.announcement-meta .type {
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-weight: 500;
}

.type.系统 { background: rgba(66, 133, 244, 0.1); color: #4285f4; }
.type.更新 { background: rgba(52, 168, 83, 0.1); color: #34a853; }
.type.活动 { background: rgba(251, 188, 5, 0.1); color: #fbbc05; }
.type.通知 { background: rgba(234, 67, 53, 0.1); color: #ea4335; }

/* 响应式调整 */
@media (max-width: 768px) {
  .search-container {
    padding: 0 1rem;
  }

  .search-box {
    flex-direction: column;
    padding: 1rem;
  }

  .api-type-selector {
    width: 100%;
  }

  .announcements-container {
    padding: 0 1rem;
  }

  .announcements-header h2 {
    font-size: 1.8rem;
  }

  .announcement-tabs {
    overflow-x: auto;
    padding-bottom: 0.5rem;
    justify-content: flex-start;
  }

  .announcement-tabs span {
    white-space: nowrap;
  }

  .announcements-grid {
    grid-template-columns: 1fr;
  }
}

/* 移动端导航栏适配 */
@media (max-width: 768px) {
  .navbar {
    height: 56px;
    padding: 0;
    background: white;
  }

  .navbar-container {
    padding: 0 1rem;
    justify-content: space-between;
  }

  /* LOGO 尺寸调整 */
  .logo {
    gap: 0.35rem;
  }

  .logo-svg {
    width: 20px;
    height: 20px;
  }

  .logo-text {
    font-size: 0.95rem;
    font-weight: 600;
  }

  /* 隐藏域名 */
  .logo-domain {
    display: none;
  }

  /* 汉堡菜单按钮样式 */
  .menu-toggle {
    display: block;
    width: 40px;
    height: 40px;
    padding: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 1001;
    position: relative;
  }

  .menu-toggle i {
    font-size: 20px;
    color: #1a237e;
  }

  /* 遮罩层 */
  .menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
  }

  /* 侧边菜单 */
  .nav-menu {
    position: fixed;
    top: 0;
    right: -100%;  /* 改为使用right属性 */
    width: 80%;
    height: 100vh;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    flex-direction: column;
    padding: 80px 1.5rem 2rem;
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);  /* 使用right过渡 */
    z-index: 1000;
  }

  .nav-menu.menu-open {
    right: 0;  /* 打开时移动到right: 0 */
  }

  /* 导航链接样式 */
  .navbar-links {
    flex-direction: column;
    gap: 0.75rem;
  }

  .nav-link {
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    width: 100%;
    border-radius: 6px;
  }

  .nav-link i {
    width: 20px;
    margin-right: 0.5rem;
  }

  /* 创作者入驻按钮 */
  .nav-link.highlight {
    margin-top: 1rem;
    background: #1a237e;
    color: white;
    text-align: center;
  }
}

/* 小屏幕手机适配 */
@media (max-width: 360px) {
  .navbar {
    height: 50px;
  }

  .logo-text {
    font-size: 1rem;
  }

  .hero-title {
    font-size: 1.75rem;
  }

  .stat-number {
    font-size: 1.75rem;
  }
}

/* PC端LOGO样式 */
.logo-full {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.logo-svg {
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 2px 4px rgba(26, 35, 126, 0.2));
}

.logo-text {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a237e;
  letter-spacing: 0.5px;
}

.logo-domain {
  font-size: 0.9rem;
  color: #666;
  font-weight: 400;
  opacity: 0.8;
  margin-left: 0.5rem;
  position: relative;
  padding-left: 0.75rem;
}

.logo-domain::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: #666;
  opacity: 0.3;
}

/* 默认隐藏移动端LOGO */
.logo-mobile {
  display: none;
}

/* 移动端样式 */
@media (max-width: 768px) {
  /* 隐藏PC端LOGO，显示移动端LOGO */
  .logo-full {
    display: none;
  }

  .logo-mobile {
    display: block;
  }

  .logo-mobile .logo-text {
    font-size: 16px;
    font-weight: 600;
    color: #1a237e;
  }

  /* 其他移动端样式保持不变 */
}

/* 移动端 Hero Section 样式调整 */
@media (max-width: 768px) {
  .hero-section-mobile {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    padding: 1rem;
  }

  /* 背景样式 */
  .hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  .bg-pattern {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
    opacity: 0.95;
  }

  .bg-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  }

  .tech-circles {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .tech-circle {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(37,99,235,0.1));
    filter: blur(30px);
  }

  .tech-circle:nth-child(1) {
    top: -10%;
    right: -20%;
    width: 250px;
    height: 250px;
  }

  .tech-circle:nth-child(2) {
    bottom: 20%;
    left: -10%;
    width: 200px;
    height: 200px;
  }

  .tech-circle:nth-child(3) {
    bottom: -10%;
    right: 10%;
    width: 150px;
    height: 150px;
  }

  /* 内容样式 */
  .hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    padding: 2rem 0;
  }

  /* 品牌标识 */
  .brand-identifier {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .brand-logo {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    box-shadow: 0 8px 16px rgba(59,130,246,0.2);
  }

  .brand-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    letter-spacing: 0.5px;
  }

  /* 标题样式 */
  .hero-titles {
    text-align: left;
  }

  .main-title {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1rem;
  }

  .title-line {
    display: block;
    color: white;
  }

  .title-line.highlight {
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .subtitle {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.8);
    margin-bottom: 1.5rem;
  }

  /* 特性标签 */
  .feature-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .tag {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255,255,255,0.1);
    border-radius: 20px;
    font-size: 0.9rem;
    color: white;
    backdrop-filter: blur(10px);
  }

  /* 数据统计 */
  .stats-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .stat-item {
    background: rgba(255,255,255,0.05);
    border-radius: 16px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    backdrop-filter: blur(10px);
  }

  .stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(59,130,246,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #60a5fa;
  }

  .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    line-height: 1;
    margin-bottom: 0.25rem;
  }

  .stat-label {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
  }

  /* CTA按钮组 */
  .cta-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
  }

  .cta-button {
    width: 100%;
    padding: 1rem;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    position: relative;
    overflow: hidden;
  }

  .cta-button.primary {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
  }

  .cta-button.secondary {
    background: rgba(255,255,255,0.1);
    color: white;
    backdrop-filter: blur(10px);
  }

  .button-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .button-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
      45deg,
      transparent,
      rgba(255,255,255,0.2),
      transparent
    );
    transform: translateX(-100%);
    animation: buttonGlow 3s infinite;
  }

  @keyframes buttonGlow {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
    100% { transform: translateX(100%); }
  }
}

/* 添加移动端特有的动画效果 */
@media (max-width: 768px) {
  @keyframes floatMobile {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }

  .stat-item {
    animation: floatMobile 3s infinite ease-in-out;
  }

  .stat-item:nth-child(2) {
    animation-delay: 0.5s;
  }

  .stat-item:nth-child(3) {
    animation-delay: 1s;
  }
}

.notice-container {
  position: fixed;
  left: 0;
  width: 100%;
  background: white;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

/* PC端样式 */
@media (min-width: 769px) {
  .notice-container {
    top: 0;
    height: 400px;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
  }
}

/* 移动端样式 */
@media (max-width: 768px) {
  .notice-container.mobile {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-height: 80vh;
    border-radius: 16px;
  }
}

.notice-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.notice-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
  margin-bottom: 1rem;
}

.notice-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: #1a237e;
}

.notice-title i {
  color: #3b82f6;
}

.notice-actions {
  display: flex;
  gap: 1rem;
}

.notice-btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
}

.notice-btn:not(.primary) {
  background: #f3f4f6;
  color: #4b5563;
}

.notice-btn.primary {
  background: #3b82f6;
  color: white;
}

.notice-body {
  flex: 1;
  overflow-y: auto;
  padding-right: 1rem;
}

.notice-item {
  padding: 1rem;
  border-radius: 12px;
  background: #f8fafc;
  margin-bottom: 1rem;
}

.notice-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.notice-tag {
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
}

.notice-tag.重要 { background: #fee2e2; color: #dc2626; }
.notice-tag.更新 { background: #e0f2fe; color: #0284c7; }
.notice-tag.通知 { background: #f3e8ff; color: #7e22ce; }

.notice-date {
  font-size: 0.85rem;
  color: #6b7280;
}

.notice-item-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1a237e;
  margin-bottom: 0.5rem;
}

.notice-item-content {
  font-size: 0.95rem;
  color: #4b5563;
  line-height: 1.6;
}

/* 滚动条样式 */
.notice-body::-webkit-scrollbar {
  width: 6px;
}

.notice-body::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.notice-body::-webkit-scrollbar-thumb {
  background: #c5c5c5;
  border-radius: 3px;
}

/* 过渡动画 */
.notice-enter-active,
.notice-leave-active {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* PC端动画 */
@media (min-width: 769px) {
  .notice-enter-from {
    transform: translateY(-100%);
  }
  
  .notice-leave-to {
    transform: translateY(-100%);
  }
}

/* 移动端动画 */
@media (max-width: 768px) {
  .notice-enter-from {
    opacity: 0;
    transform: translate(-50%, -40%);
  }
  
  .notice-leave-to {
    opacity: 0;
    transform: translate(-50%, -60%);
  }
}

/* 滚动公告条样式 */
.scrolling-notice-bar {
  position: relative;
  width: 100%;
  height: 44px;
  background: linear-gradient(90deg, #1a237e 0%, #0d47a1 100%);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.notice-content {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 1rem;
}

.notice-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffd700;
  font-size: 1.2rem;
}

.fa-shake {
  animation: shake 2s ease infinite;
}

.notice-scroll {
  flex: 1;
  overflow: hidden;
  margin: 0 1rem;
}

.scroll-wrapper {
  display: inline-block;
  white-space: nowrap;
  transition: transform 0.5s linear;
}

.notice-text {
  color: white;
  font-size: 0.95rem;
  display: inline-block;
  padding-right: 50px;
}

.notice-text .highlight {
  color: #ffd700;
  font-weight: 600;
  margin: 0 0.5rem;
}

.notice-text .divider {
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0.75rem;
}

.notice-text .tag {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  font-size: 0.85rem;
  margin: 0 0.5rem;
}

.notice-text .tag.special {
  background: linear-gradient(90deg, #ff4b1f, #ff9068);
  color: white;
  padding: 0.15rem 0.75rem;
  font-weight: 500;
}

.notice-close {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.notice-close:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

@keyframes shake {
  0% { transform: rotate(0); }
  5% { transform: rotate(15deg); }
  10% { transform: rotate(-15deg); }
  15% { transform: rotate(0); }
  100% { transform: rotate(0); }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .scrolling-notice-bar {
    height: 40px;
  }

  .notice-icon {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .notice-text {
    font-size: 0.85rem;
  }
}
</style>
  
  